<template>
    <div>
        <div>基本信息</div>
        <div v-if="!channgeeditvalue">姓名：{{ tableData.name }}</div>
        <div v-if="!channgeeditvalue">电话：{{ tableData.phone }}</div>
        <div v-if="!channgeeditvalue">性别：{{ tableData.sex }}</div>
        <div v-if="!channgeeditvalue">生日：{{ tableData.birthday }}</div>
        <div v-if="channgeeditvalue">姓名:
            <input v-model="input1" placeholder="Please input" />
        </div>
        <div v-if="channgeeditvalue">电话:
            <input v-model="input2" placeholder="Please input" />
        </div>
        <div style="display: flex;" v-if="channgeeditvalue">
            <div style="line-height: 32px;">性别:</div>
            <div style="width: 80%;">
                <el-select v-model="value">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
        </div>
        <div style="display: flex;" v-if="channgeeditvalue">
            <div style="line-height: 32px;">生日:</div>
            <div style="width: 80%;">
                <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
            </div>
        </div>
        <el-button v-if="!channgeeditvalue" type="warning" @click="changeadit()">修改</el-button>
        <div style="display: flex;">
            <el-button v-if="channgeeditvalue" @click="exitadit()">取消</el-button>
            <el-button v-if="channgeeditvalue" type="warning" @click="editsure()">保存</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">

import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const store = useCounterStore()
const { count } = storeToRefs(store)
const {info} =storeToRefs(store)


let value =ref('')
let value1 = ref('')
const options = [{
    value: '男',
    label: '男',
},
{
    value: '女',
    label: '女',
},]
import { getNumberinfo } from '../../../api/membersettingApi'
import { editnmberinfo } from '../../../api/membersettingApi'
interface info {
    birthday: any,
    id: number,
    name: string,
    phone: string,
    sex: string

}
let tableData = reactive(<info>{
    birthday: 1,
    id: 1,
    name: 'string',
    phone: 'string',
    sex: 'string'
})
let getdata = async () => {
    let get = await getNumberinfo({
        id: count.value
    })

    if (get) {
        tableData.name = get.data.data.name;
        tableData.phone = get.data.data.phone;
        tableData.sex = get.data.data.sex;
        tableData.birthday = get.data.data.birthday;

    }

}
getdata();


const channgeeditvalue = ref(false)
let input1 = ref('')
let input2 = ref('')
const changeadit = () => {
    channgeeditvalue.value = true;
    input1.value = tableData.name
    input2.value = tableData.phone
    value1.value= tableData.birthday
    value.value= tableData.sex

}
const editsure= async()=>{
    
    let edit = await editnmberinfo({
        id: count.value,
        birthday:value1.value,
        phone:input2.value,
        sex:value.value,
        name:input1.value 
    })
    if (edit) {
        getdata()
        info.value=true

    }

}
const exitadit = () => {
    channgeeditvalue.value = false

}
// onMounted(() => {

// })
</script>
<style></style>